<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
      <i class="el-icon-search btn-search" @click="handleShowSearch()"></i>
      <div class="btn-box">
        <el-button
          @click="dowloadExcel()"
          type="primary"
          icon="el-icon-document"
          :disabled="list.length <= 0"
          >导出excel</el-button
        >
      </div>
      <div v-show="showbtns == true" class="search-lf">
        <el-form-item width="200px" label="课程名称">
          <el-input
            v-model="listQuery.courseName"
            placeholder="课程名称"
          ></el-input>
        </el-form-item>
         <el-form-item width="200px" label="客户名称">
          <el-input
            v-model="listQuery.customerName"
            placeholder="客户名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input
            v-model="listQuery.supplierName"
            placeholder="合同申请人"
          ></el-input>
        </el-form-item>

        <el-form-item label="课程编导">
          <el-select
            filterable
            v-model="listQuery.courseChargeName"
            placeholder="请选择"
          >
            <el-option
              v-for="item in courseChargeList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item  label="课程质量评价">
           <el-select
            filterable
            v-model="listQuery.courseQualityEvaluation"
            placeholder="请选择"
          >
          
            <el-option
              
              key="1"
              label="1星"
              value="1"
            ></el-option>
             <el-option
              
              key="2"
              label="2星"
              value="2"
            ></el-option>
             <el-option
              
              key="3"
              label="3星"
              value="3"
            ></el-option>
             <el-option
              
              key="4"
              label="4星"
              value="4"
            ></el-option>
             <el-option
              
              key="5"
              label="5星"
              value="5"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="getList()">查询</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-table
      v-loading="listLoading"
      border
      height="650px"
      :data="list"
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" width="60px" label="序号">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="课程ID">
        <template slot-scope="{ row }">
          <template v-if='isRolds!=0'>
             <span>{{ row.customerName }}</span>
          </template>
          <a v-else
            class="link-type"
            href="javascript:;"
            @click="handleDetail(row.id)"
            >{{ row.courseId }}</a
          >
        </template>
      </el-table-column>

      <el-table-column align="center" width="200px" label="客户名称">
        <template slot-scope="{ row }">
          <span>{{ row.customerName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="学科">
        <template slot-scope="{ row }">
          <span>{{ row.subjectCategoryName }}</span>
        </template>
      </el-table-column>
      <el-table-column sort align="center" label="课程名称">
        <template slot-scope="{ row }">
          <span>{{ row.courseName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="供应商名称">
        <template slot-scope="{ row }">
          <span>{{ row.supplierName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="课程编导">
        <template slot-scope="{ row }">
          <span>{{ row.courseChargeName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="拍摄形式">
        <template slot-scope="{ row }">
          <span>{{ row.shootModeName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="课程质量评价">
        <template slot-scope="{ row }">
              <el-rate
            v-model="row.courseQualityEvaluation"
            show-score
            disabled
            text-color="#ff9900"
            score-template="{value}"
          ></el-rate>
          
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="{ row }">
          <el-button
          v-show='isRolds==0'
            @click="handleDel(row.id)"
            class="mg-l"
            type="danger"
            size="mini"
            icon="el-icon-delete"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog 
      :close-on-click-modal="false"
      top="2vh"
      :visible.sync="dialogVisible"
      width="70%"
      title="入库单详情"
    >
      <el-form
      class="rk_form"
        label-width="100px"
        ref="warehouseListes"
        :model="warehouseListes"
        label-position="left"
      >
  
        <el-row >
          <el-col class="col-border-ru">
            <div class="part1">
              <el-row>
                <el-col :span='12'>
                   <el-form-item label="入库ID">
                <span style="color:#429EFF">{{warehouseListes.id}}</span>
              </el-form-item>
                </el-col>
                <el-col :span='12'>
                  <el-form-item  label="PO单号">
                    

                    <span style="color:#429EFF">{{warehouseListes.po}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span='12'>
                   <el-form-item label="客户名称">
                    <!-- <el-input v-model="warehouseListes.customerName" /> -->

                    <span style="color:#429EFF">{{warehouseListes.customerName}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span='12'>
                   <el-form-item label="课程编导">
                    <span style="color:#429EFF">{{warehouseListes.courseChargeName}}</span>
                  </el-form-item>
               
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="课程ID">
                    <span style="color:#429EFF">{{warehouseListes.courseId}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="课程名称">
                    <span style="color:#429EFF">{{warehouseListes.courseName}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row  :gutter="20">
                <el-col :span='12'>
                   
                  <el-form-item label="专业分类">
                    <span style="color:#429EFF">{{warehouseListes.majorCategory}}</span>
                  </el-form-item>
                
                </el-col>
                 <el-col :span="12">
                  <el-form-item label="学科门类">
                    <span style="color:#429EFF">{{warehouseListes.subjectCategoryName}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                   <el-form-item  label="省份">
                    <!-- <el-input v-model="warehouseListes.provinceName" /> -->

                    <span style="color:#429EFF">{{warehouseListes.provinceName}}</span>
                  </el-form-item>
                </el-col>
               <el-col :span='12'>
                  <el-form-item label="课程质量评级">
                    <el-rate disabled v-model="warehouseListes.courseQualityEvaluation"></el-rate>
                  </el-form-item>
               </el-col>
              
              </el-row>
              <el-form-item label="讲师">
                <el-input v-model="warehouseListes.teacher" placeholder="请输入" />
              </el-form-item>
              <el-form-item label="拍摄形式">
                <el-input v-model="warehouseListes.inShootMode" placeholder="请输入" />
              </el-form-item>
               <el-form-item label="课程质量评语">
                    <el-input v-model="warehouseListes.courseQualityComment" />
                  </el-form-item>
            </div>
            <!-- <el-form-item label="入库基本信息"></el-form-item> -->
            <div class="part_title">
              <span>入库基本信息</span>
              <i class="span_border"></i>
              <!-- <span class="title_bor"></span> -->
            </div>
            <div class="ru_border">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="提供人">
                    <el-input v-model="warehouseListes.inProvider" placeholder="请输入 " />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="提供方式">
                    <el-input v-model="warehouseListes.inProvideMode" placeholder="请输入 " />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item  label="提供日期">
                    <el-date-picker
                      v-model="warehouseListes.inProvideDate"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy/MM/dd"
                      value-format="yyyy/MM/dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="100px" label="可结款日期">
                    <el-date-picker
                      v-model="warehouseListes.inSettlementDate"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy/MM/dd"
                      value-format="yyyy/MM/dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label-width="100px" label="视频存档URL">
                <el-input v-model="warehouseListes.inVideoUrl" placeholder="请输入视频存档URL" />
              </el-form-item>
              <el-form-item label-width="100px" label="工程存档URL">
                <el-input v-model="warehouseListes.inProjectUrl" placeholder="请输入工程存档URL " />
              </el-form-item>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item  label-width="110px" label="实际时长">
                    <span  style="color:#429EFF">{{warehouseListes.actualTimeLength}}</span>
                    <!-- <el-input disabled v-model="warehouseListes.actualTimeLength" placeholder="请输入 " /> -->
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="100px" label="约定售后期限">
                    <!-- <el-input v-model="warehouseListes." placeholder="请输入 " /> -->
                    <el-date-picker
                      v-model="warehouseListes.inAfterSaleTimeLimit"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy/MM/dd"
                      value-format="yyyy/MM/dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="课程备注">
                <el-input v-model="warehouseListes.inCourseLibRemark" placeholder="请输入 " />
              </el-form-item>
            </div>
          </el-col>

          <el-col  class="col-birder-r">
           
               <div class="part_title">
              <span>状态反馈信息</span>
              <i class="span_border"></i>
             
            </div>
            <div class="ru_border">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="开始下载时间">
                    <el-input v-model="warehouseListes.feedbackDownloadStartTime" placeholder="请输入 " />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="完成下载时间">
                    <el-input v-model="warehouseListes.feedbackDownloadEndTime" placeholder="请输入 " />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item  label="课程核对状态">
                <el-input v-model="warehouseListes.feedbackCourseCheckState" placeholder="请输入 " />
              </el-form-item>
              <el-form-item label="课程反馈状态">
                <el-input v-model="warehouseListes.feedbackCourseState" placeholder="请输入 " />
              </el-form-item>
              <el-form-item label="ERP反馈状态">
                <el-input v-model="warehouseListes.feedbackErpState" placeholder="请输入 " />
              </el-form-item>
            </div>
           
                <div class="part_title">
              <span>供应商信息</span>
              <i class="span_border"></i>
             
            </div>
            <el-row :gutter='20'>
                <el-col :span='12'>
                  <el-form-item class="label-pos"  label="供应商名称">
                    <span style="color:#429EFF">{{warehouseListes.supplierName}}</span>
                    <!-- <el-input v-model="" disabled placeholder=" " /> -->
                  </el-form-item>
                </el-col>
                <el-col :span='12'>
                  <el-form-item class="label-pos" label="结款人">
                    <el-input v-model="warehouseListes.supplierInfoPayer" placeholder=" " />
                  </el-form-item>
                </el-col>
            </el-row>
            
              
                <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="版本信息">
                    <el-input v-model="warehouseListes.supplierInfoVersion" placeholder="请输入 " />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item class="ysd_right" label="验收单">
                    
                    <a
                      @click="uploadPath"
                      v-if="this.warehouseListes.supplierInfoAcceptanceReportPath"
                      class="el-icon-download"
                    >下载</a>
                       <a
                  
                      v-else
                    
                    >无</a>

                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="终版数量">
                        <el-input
                          v-model="warehouseListes.supplierInfoEndEditionQuantity"
                          placeholder="请输入 "
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item class="label_center" label="净版数量">
                        <el-input v-model="warehouseListes.supplierInfoPureQuantity" placeholder="请输入 " />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="字幕数量">
                        <el-input
                          v-model="warehouseListes.supplierInfoSubtitlesNumber"
                          placeholder="请输入 "
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item  class="label_center" label="工程数量">
                        <el-input v-model="warehouseListes.supplierInfoProjectNumber" placeholder="请输入 " />
                      </el-form-item>
                    </el-col>
                  </el-row>
              
             
              </el-row>
            <el-form-item  class="label_center" label="备注信息">
                    <el-input
                      type="textarea"
                      :rows="4"
                      v-model="warehouseListes.supplierInfoAcceptanceReportRemark"
                      placeholder="请输入 "
                    />
                  </el-form-item>
                  <div class="flex-box">
                    <div class="flex-iten">
                        <el-form-item label="大纲"  label-width="80px">
                          
                    <el-radio v-model="warehouseListes.supplierInfoIsOutline" label="1" value='1'>有</el-radio>
                    <el-radio v-model="warehouseListes.supplierInfoIsOutline" label="0">无</el-radio>
                  </el-form-item>
                    </div>
                    <div class="flex-iten">
                         <el-form-item label="讲稿" class="label_center" label-width="70px">
                    <el-radio v-model="warehouseListes.supplierInfoIsSpeech" label="1" >有</el-radio>
                    <el-radio v-model="warehouseListes.supplierInfoIsSpeech" label="0" >无</el-radio>
                    <el-radio-box>

                    </el-radio-box>
                  </el-form-item>
                    </div>
                    <div class="flex-iten">
                        <el-form-item label="PPT" class="label_center" label-width="70px">
                    <el-radio v-model="warehouseListes.supplierInfoIsPpt" label="1">有</el-radio>
                    <el-radio v-model="warehouseListes.supplierInfoIsPpt" label="0">无</el-radio>
                  </el-form-item>
                    </div>
                  </div>
                
              
           
          
          </el-col>
        </el-row>
      
      </el-form>
      <div style="text-align: right; margin-top: 20px">
        <el-button type="primary" @click="dialogVisible = false"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <pagination
      v-show="total >= 20"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  wareHouseList,
  delWarehouse,
  getWarehouseById,
} from "@/api/supplier_settlement";

import { getCourseCharge, baseUrl2 } from "@/api/remote-search";
import { Message } from "element-ui";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import {exportWareHouse} from '@/api/exportExcel'
export default {
  name: "wareHouseList",
  components: { Pagination },
  filters: {
    statusColorFilter(status) {
      const statusMap = {
        1: "success",
        2: "danger",
        3: "warning",
        4: "info",
        5: " ",
      };
      return statusMap[status];
    },
    statusFilter(status) {
      const statusMap = {
        1: "进行中",
        2: "已完成",
        3: "已过期",
        0: "新合同",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      showbtns: false,
      list: [],
      isRolds:sessionStorage.getItem('roids'),
      editDisabled: false,
      dialogVisible: false,
      downloadLoading: false,
      courseChargeList: [],
      warehouseListes: {
        supplierInfoIsSpeech:"1",
        supplierInfoIsOutline:"1",
        supplierInfoIsPpt:"1"

      },
      total: 0,
      dialogVisibleMenu: false,
      listLoading: true,
      listQuery: {
        access_token: sessionStorage.getItem("token"),
        page: 1,
        courseChargeName: "",
        supplierName: "",
        customerName: "",
        pageSize: 20,
      },
    };
  },
  created() {
    this.getList();
  },
  computed: {},
  methods: {
    handleDetail(id) {
      this.dialogVisible = true;
      getWarehouseById(id).then((res) => {
        this.warehouseListes = res.data.data;
        this.warehouseListes.supplierInfoIsSpeech=res.data.data.supplierInfoIsSpeech.toString();
        this.warehouseListes.supplierInfoIsOutline=res.data.data.supplierInfoIsOutline.toString();
        this.warehouseListes.supplierInfoIsPpt=res.data.data.supplierInfoIsPpt.toString();
         
       
      });
      console.log(id);
    },
    handleClose() {
      this.editDisabled = false;
    },
    handleShowSearch() {
      this.showbtns = !this.showbtns;
    },
        uploadPath() {
      window.location.href =
        baseUrl2 + "/api/file/download" + this.warehouseListes.supplierInfoAcceptanceReportPath;
    },
    dowloadExcel() {
      exportWareHouse(this.listQuery);
      // window.location.href =
      //   baseUrl2 +
      //   "/api/file/export_warehouse_receipt?customerName=" +
      //   this.listQuery.customerName +
      //   "&supplierName=" +
      //   this.listQuery.supplierName +
      //   "&courseChargeName=" +
      //   this.listQuery.courseChargeName;
    },
    getList() {
      this.editDisabled = false;
      getCourseCharge().then((res) => {
        this.courseChargeList = res.data.data;
      });
      this.listLoading = true;
      wareHouseList(this.listQuery)
        .then((response) => {
          this.list = response.data.data.rows;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    handleDel(id) {
      this.$confirm("确定删除该数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          console.log("ddd" + id);
          delWarehouse(id).then((res) => {
            if (res.data.code == "200") {
              this.$message.success(res.data.message);
              this.getList();
            } else {
              this.$message.error(res.data.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.flex-box{
  display: flex;
  .flex-iten{
    flex: 1;
  }
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
